<template>
  <ZwDialog :appDialog="appDialog">
    <!-- <p class="msg">{{ msg }}</p> -->
    <el-form ref="configFormRef" :model="configForm" :disabled="props.minAppInfo.super != 1" :rules="rules" label-width="145px" class="demo-ruleForm" :size="formSize" status-icon>
      <el-form-item prop="app_id">
        <template #label>
          <div class="label_box">
            <span>小程序appid</span>
            <el-popover placement="top" effect="dark" width="auto" trigger="hover">
              <template #reference>
                <img class="ques_icon" src="@/assets/smartMarketing/drainage/luckyDraw/question.png" alt="" />
              </template>
              <template #default>
                <span>小程序唯一凭证，可在 【微信公众号平台-设置-开发设置】 页面获取</span>
              </template>
            </el-popover>
          </div>
        </template>
        <el-input v-model="configForm.app_id" placeholder="请输入小程序appid" class="config_input" />
      </el-form-item>
      <el-form-item prop="app_secret">
        <template #label>
          <div class="label_box">
            <span>小程序AppScret</span>
            <el-popover placement="top" effect="dark" width="auto" trigger="hover">
              <template #reference>
                <img class="ques_icon" src="@/assets/smartMarketing/drainage/luckyDraw/question.png" alt="" />
              </template>
              <template #default>
                <span>小程序唯一凭证，可在 【微信公众号平台-设置-开发设置】 页面获取</span>
              </template>
            </el-popover>
          </div>
        </template>
        <el-input v-model="configForm.app_secret" placeholder="请输入小程序AppScret" class="config_input" />
      </el-form-item>
      <el-form-item label="用户协议标题" prop="title">
        <el-input v-model="configForm.title" placeholder="请输入用户协议标题" class="config_input"  show-word-limit maxlength="15"/>
      </el-form-item>
      <el-form-item label="用户协议超链接" prop="link">
        <el-input v-model="configForm.link" placeholder="请输入用户协议超链接" class="config_input" />
      </el-form-item>
    </el-form>
    <div class="qr_code_box">
      <p class="qr_title">配置营销小程序前，请联系我们</p>
      <el-image fit="cover" class="qr_img" src="https://static.scrm.keyid.cn/assets/images/global/service.png">
        <template #error>
          <div class="image-slot">
            <el-icon><icon-picture /></el-icon>
          </div>
        </template>
      </el-image>
      <p class="service">扫码添加客服</p>
    </div>
  </ZwDialog>
</template>

<script setup lang="ts">
  import { ref, reactive, watch } from 'vue'
  import ZwDialog from '@/components/Dialog.vue'
  import { Picture as IconPicture } from '@element-plus/icons-vue'
  import { validatorUrl } from '@/utils/validate'
  import { ElMessage } from 'element-plus'

  const emit = defineEmits(['submit'])
  const props = withDefaults(defineProps<{ minAppInfo: any }>(), {
    minAppInfo: {}
  })
  const configFormRef = ref()
  const formSize = ref('default')
  const isShow = ref(false)
  const configForm = ref({
    app_id: '',
    app_secret: '',
    link: '',
    title: ''
  })
  const http = (rule: any, value: any, callback: any) => {
    if (value == '') callback(new Error('请输入用户协议超链接'))
    else if (validatorUrl(value, 2)) {
      callback(new Error('必须以https://开头'))
    } else {
      callback()
    }
  }
  const rules = reactive({
    app_id: [{ required: true, message: '请输入小程序appid', trigger: 'blur' }],
    app_secret: [{ required: true, message: '请输入小程序AppScret', trigger: 'blur' }],
    link: [{ required: true, validator: http, trigger: 'blur' }],
    title: [{ required: true, message: '请输入用户协议标题', trigger: 'blur' }]
  })

  const cancelHandel = () => {
    if (!configFormRef.value) return
    configFormRef.value.resetFields()
    isShow.value = false
  }
  const disabSetConfig = () => {
    ElMessage.warning('请联系超级管理员修改！')
    return
  }
  const submitHandel = async () => {
    if (!configFormRef.value) return
    await configFormRef.value.validate((valid, fields) => {
      if (valid) {
        if (props.minAppInfo.super != 1) disabSetConfig()
        else emit('submit', configForm.value)
      } else {
        console.log('error submit!', fields)
      }
    })
  }

  const appDialog = reactive({
    visible: isShow,
    title: '小程序授权',
    width: '660px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确定',
    isInit: false, //是否重置
    isChooseDisabled: false, //重新打开传递进来的数据是否重置
    chooseArr: [] // 传递进来选中的数据
  })
  watch(
    () => props.minAppInfo,
    (val) => {
      configForm.value.app_id = val.appid || ''
      configForm.value.app_secret = val.appsecret || ''
      configForm.value.link = val.link || ''
      configForm.value.title = val.title || ''
    }
  )
  defineExpose({
    isShow,
    cancelHandel
  })
</script>

<style lang="scss" scoped>
:deep(.el-form-item__label) {
  display: flex;
  align-content: center;
  justify-content: flex-end;
}
.label_box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .ques_icon {
    width: 14px;
    height: 14px;
    margin-left: 4px;
  }
}
.config_input {
  max-width: 440px;
}
.qr_code_box {
  width: 100%;
  text-align: center;
  .qr_title {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #33302d;
    line-height: 20px;
  }
  .qr_img {
    width: 155px;
    height: 155px;
    margin-top: 16px;
  }
  .service {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #969696;
    line-height: 17px;
    margin-top: 4px;
    padding-bottom: 40px;
  }
}
</style>
